<!--
 * @Author: weidewei
 * @Date: 2025-05-19 09:25:34
 * @LastEditors: weidewei
 * @LastEditTime: 2025-05-20 10:25:55
 * @Description: 
 * @FilePath: \v3\src\views\home\components\TestProps.vue
-->
<template>
  <div>
    <h2>TestProps</h2>
    收到的props参数：{{ props.a }}---
    {{ props.userInfo }} 不用props接收到的参数：{{ attrs }}
  </div>
</template>
<script lang="ts" setup name="TestProps">
interface Person {
  name: string;
  age: number;
  // 明确禁止额外属性
  [key: string]: never; // 👈 添加索引签名禁止额外属性
}
import { useAttrs } from "vue";
const attrs = useAttrs();
// const props = defineProps({
//   a: {
//     type: String,
//     default: "",
//     required: true,
//     // validator(value, props) {
//     //   console.log("value",value)
//     //   console.log("props",props)
//     // }
//   },
//   userInfo:Person {
//     type: Object
//     default: () => ({})
//   },
// });

// 直接使用ts的泛型语法
const props = defineProps<{
  a: string;
  userInfo?: Person;  
}>();
// console.log(attrs);
</script>
